import QtQuick 1.1
import com.nokia.meego 1.0
import com.nokia.extras 1.0

import REngine 1.0
import "constants.js" as UI

RPage {
    id: codecSelectionView

    property bool selectForFile:false
    property string fileName:""
    property bool addAuto: true
    property bool addMore: true

    //    Rectangle {
    //        id: currentPath
    //        anchors.top: parent.top
    //        width: parent.width
    //        height: 70
    //        color: "steelblue"
    //        Label {
    //            anchors.fill: parent
    //            verticalAlignment: Text.AlignVCenter
    //            horizontalAlignment: Text.AlignLeft
    //            color: "white"
    //            text: stripFilePrefix(folderModel.folder)
    //        }
    //    }
    Rectangle {
        id: header
        anchors.top: parent.top
        width: parent.width
        height: 80
        color: "dodgerblue"
        Label {
            anchors.centerIn: parent
            font.bold: true
            font.pixelSize: 35
            color: "White"
            text: qsTr("Codec Selection")
        }
    }

    function load() {
        screen.allowedOrientations = engine.setting(REngine.Orientation)
        listModel.clear()
        var regionList = new Array()
        regionList = engine.availableCodecRegions()
        console.log("regionList length", regionList.length)
        if (codecSelectionView.addAuto) {
            listModel.append({"name": qsTr("Auto")});
        }

        for (var i = 0; i < regionList.length; i++) {
            console.log("add region", regionList[i])
            listModel.append({"name": regionList[i]})
        }

        if (codecSelectionView.addMore) {
            listModel.append({"name": qsTr("More")});
        }
    }

    ListView {
        id: list
        clip: true
        anchors.top: header.bottom
        anchors.bottom: parent.bottom
        //        anchors.fill: parent
        width: parent.width
        model: ListModel {
            id: listModel
        }

        spacing: 2
        delegate:  Rectangle {
            height: UI.LIST_ITEM_HEIGHT
            width: parent.width

            Rectangle {
                id: background
                anchors.fill: parent
                // Fill page porders
                visible: mouseArea.pressed
                color: "grey"
            }

            Text {
                anchors.fill: parent
                anchors.leftMargin: UI.INDENT_DEFAULT
                elide: Text.ElideRight
                text: name
                textFormat: Text.PlainText
                font.weight: Font.Bold
                font.pixelSize: UI.LIST_TILE_SIZE
                color: theme.inverted ? UI.LIST_TITLE_COLOR_INVERTED : UI.LIST_TITLE_COLOR
                wrapMode: Text.Wrap
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
            }

            MouseArea {
                id: mouseArea
                anchors.fill: parent
                onClicked: {
                    console.log("item clicked", index, name)
                    if (index === 0 && selectForFile === false) {
                        //index 0 is Auto and not for file(file need to select specify codec), no need to open dialog
                        //save codec
                        engine.setSetting(REngine.Codec, "Auto")
                        //Go back to previous view
                        codecSelectionView.pageStack.pop()
                    }
                    else if (addMore == true && index == listModel.count - 1) {
                        //clicked more, show all codec
                        codecSelectionDialog.loadAll()
                        codecSelectionDialog.open()
                    }
                    else {
                        codecSelectionDialog.load(name)
                        codecSelectionDialog.open()
                    }
                }
            }
        }
    }

    CodecSelectionDialog {
        id: codecSelectionDialog

        onAccepted: {
            if (codecSelectionView.selectForFile == false) {
                engine.setSetting(REngine.Codec,
                                  codecSelectionDialog.model.get(
                                      codecSelectionDialog.selectedIndex).name)
            }
            else if (codecSelectionView.selectForFile == true) {
                engine.saveFileCodec(codecSelectionView.fileName,
                                     codecSelectionDialog.model.get(
                                         codecSelectionDialog.selectedIndex).name)
            }
            //Go back to previous view
            codecSelectionView.pageStack.pop()
        }
    }

    tools: ToolBarLayout {
        ToolIcon {
            id: backTool
            iconId: "toolbar-back"
            onClicked: {
                console.log("Back button clicked")
                codecSelectionView.pageStack.pop()
            }
        }
    }

    onStatusChanged: {
        //reload chapter when viewable again
        if (status == PageStatus.Active) {
            load()
        }
    }
}
